<template>
  <div class="container-head" @click="asideAble">
    <!-- 控制侧边栏 -->
    <div class="left-aside">
      <el-tooltip :content="'侧边栏: ' + value" placement="top">
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="展开"
          inactive-value="收起"
        >
        </el-switch>
      </el-tooltip>
    </div>

    <!-- 标题 -->
    <div class="center-title">我的小助手</div>

    <!-- 最右边的头像 -->
    <div class="right-aside">

      <!-- element头像组件 -->
      <div class="demo-type">
        <div>
          <el-avatar
            :size="50"
            @error="errorHandler"
            src="https://empty"
          >
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </div>
      </div>

      <!-- 用户昵称 -->
      <div class="right-username">
        程序员
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 头部栏样式 */
.container-head {
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* background-color: green; */
}

/* 控制侧边栏滑块样式 */
.left-aside {
  margin-top: -10px;
}

/* 头部标题样式 */
.center-title {
  width: auto;
  height: 60px;
  line-height: 60px;
  /* 设置字体渐变色 */
  font-size: 22px;
  font-weight: bold;
  background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-color: pink; */
}

/* 头部个人信息 */
.right-aside {
  width: auto;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content:center;
}
/* 头部用户昵称 */
.right-username{
  width: auto;
  height: 60px;
  line-height: 60px;
  font-size: 22px;
  font-weight: bold;
  padding-right: 10px;
  padding-left: 10px;
  /* background-color: pink; */
}
/* 头像 */
.right-aside .demo-type{
 margin-top: 5px;
}
</style>
<script>
export default {
  data() {
    return {
      value: "展开",
    };
  },
  methods: {
    asideAble() {
      this.$emit("asideFlag", this.value);
    },
    // 头像加载失败的fallback行为
    errorHandler() {
      return true;
    },
  },
};
</script>